<template>
  <div class="bg">
    <nav-com
      title="编辑信息"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-row
      class="orders_con"
      @click="showPopup = true"
      type="flex"
      justify="space-between"
    >
      <p>头像</p>
      <span><img :src="userInfo.avatar" style="width:10vw;height:10vw" /><img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      class="orders_con-2"
      @click="toChange('name')"
      type="flex"
      justify="space-between"
    >
      <p>昵称</p> <span>{{userInfo.nickname}}<img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      class="orders_con-2"
      @click="toChange('sex')"
      type="flex"
      justify="space-between"
    >
      <p>性别</p> <span>{{userInfo.gender  || '' | sexFilter }}<img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      class="orders_con-2"
      @click="showTime = true"
      type="flex"
      justify="space-between"
    >
      <p>生日</p> <span>{{userInfo.birthday}}<img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      class="orders_con-2"
      type="flex"
      justify="space-between"
    >
      <p>登录手机号</p> <span>{{userInfo.mobile}} </span>
    </van-row>
    <van-row
      @click="handleClick(1)"
      class="orders_con-2"
      type="flex"
      justify="space-between"
    >
      <p>实名认证</p> <span><img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      @click="handleClick(2)"
      class="orders_con-2"
      type="flex"
      justify="space-between"
    >
      <p>修改密码</p> <span><img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      @click="handleClick(3)"
      class="orders_con-2"
      type="flex"
      justify="space-between"
    >
      <p>银行卡绑定</p> <span><img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      @click="handleClick(4)"
      class="orders_con-2"
      type="flex"
      justify="space-between"
    >
      <p>支付密码</p> <span><img src="../../assets/m3.png" /></span>
    </van-row>
    <van-row
      class="orders_con-2"
      @click="getGoodsAddress"
      type="flex"
      justify="space-between"
      style="margin-top:2vw"
    >
      <p>收货地址</p> <span>{{userInfo.province_name}}{{userInfo.city_name}}{{userInfo.area_name}}{{userInfo.address}}<img src="../../assets/m3.png" /></span>
    </van-row>

    <van-popup
      v-model="showPopup"
      position="bottom"
      class="popup"
    >
      <div>
        <!-- <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-progress="handleProgress"
          :limit="1"
        >
          上传
        </el-upload> -->
        <van-uploader
          :after-read='afterRead'
          :before-delete="beforeDel"
        >
          上传
        </van-uploader>
      </div>
      <div @click="showPopup = false">取消</div>
    </van-popup>
    <div v-if="showTime" >
     
    </div>
    <van-overlay :show="showTime" @click="show = false">
       <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      class="timeSelect"
      @confirm='confirm'
      :min-date="minDate"
      :max-date="maxDate"
      @cancel='showTime=false'
    />
    </van-overlay>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import moment from "moment";
import { postImages2, editAvatar, getFttuserUserId2,editUserInfo } from "@/api/api";
import { Toast } from "vant";
export default {
  components: {
    navCom,
  },
  filters:{
    sexFilter(val){
      let sex = ['男', '女']
      return sex[val-1]
    }
  },
  data() {
    return {
      minDate: new Date(1920, 1, 1),
      maxDate:new Date(),
      showTime:false,
      currentDate:new Date(),
      imageUrl: "",
      showPopup: false,
      showView: true,
      userInfo: "",
      birthday:''
    };
  },
  created() {
    this.getUserInfo()
    // if(this.$route.params.type==undefined){
    //   this.backHandler();
    // }
  },
  methods: {
    handleClick(val){
      if(val == 1){
        this.$router.push('/realName')
      }else if(val == 2){
        this.$router.push('/changePassword')
      }else if(val == 3){
        this.$router.push('/bndingBank')
      }else if(val == 4){
        this.$router.push('/payPassword')
      }
    },
    getUserInfo(){
      getFttuserUserId2().then((res) => {
        this.userInfo = res.data.data
      }).catch((err) => {
        
      });
    },
    toChange(type){
        this.$router.push({name:'changeUserInfo', params:{type}})
    },
    getGoodsAddress(){
      this.$router.push('/receiptList')
    },
    //返回
    backHandler() {
      if(weixin.isAndroid()){
        window.JS_TROOPS.goBack()
      }else{
        this.$router.go(-1);
      }
    },
    beforeDel(file) {
      if (this.fileList.length > 0) {
        this.styledisplay = "block";
      } else {
        this.styledisplay = "none";
      }
      return true;
    },
    //图片上传
    afterRead(file) {
      let that = this;
      let funBack = function (file) {
        var fd = new FormData();
        fd.append("file", file);
        postImages2(fd).then((res) => {
          that.imageUrl = res.data.data.fullurl;
          that.showPopup = false;
          that.editAvatar(that.imageUrl);
          that.$forceUpdate();
        });
      };
      weixin.uploadIF(file, funBack);
      return false;
    },
    confirm(value){
      this.showTime = false
      this.userInfo.birthday =  moment(value).format('YYYY-MM-DD')
       editUserInfo({birthday:this.userInfo.birthday}).then((res) => {
        Toast(res.data,msg)
      }).catch((err) => {
        
      });
    },
    // 修改头像
    editAvatar(file) {
      editAvatar({ avatar: file })
        .then((result) => {
          console.log(result);
          let res = result.data;
          if (res.code == 1) {
            Toast("修改成功");
            setTimeout(() => {
              // this.$router.push("/my");
              this.backHandler()
            }, 1500);
          }
        })
        .catch((err) => {});
    },
    handleProgress(e) {
      console.log(e);
      console.log(7878);
    },
  },
};
</script>

<style scoped>
.timeSelect{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.upload-demo > ul {
  display: none !important;
}
.bg {
  position: relative;
  background: #f1f3f6;
  min-height: 100vh;
}
.orders_con {
  align-items: center;
  margin: 2vw 0;
  background: #fff;
  border-radius: 1.3vw;
  height: 14.66vw;
  font-size: 3.7vw;
}
.orders_con p {
  margin-left: 4vw;
  line-height: 8.66vw;
}
.orders_con span {
  display: flex;
  align-items: center;
  margin-right: 4vw;
}
.orders_con span img {
  height: 10vw;
  border-radius: 5vw;
}
.orders_con span img:last-child {
  margin-left: 2vw;
  height: 4vw;
}
.orders_con-2 {
  align-items: center;
  background: #fff;
  border-radius: 1.3vw;
  height: 14.66vw;
  font-size: 3.7vw;
  border-bottom: 1px solid #eee;
}
.orders_con-2 p {
  margin-left: 4vw;
  line-height: 8.66vw;
}
.orders_con-2 span {
  display: flex;
  align-items: center;
  margin-right: 4vw;
}
.orders_con-2 span img {
  height: 10vw;
  border-radius: 5vw;
}
.orders_con-2 span img {
  margin-left: 2vw;
  height: 4vw;
}
.popup {
  height: 13%;
  line-height: 13vw;
  font-size: 4vw;
  text-align: center;
}
.popup div {
  border-top: 1px solid #ccc;
}
</style>